<template>
  <div class="app-container">
    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
        <el-table-column type="index" label="序号" align="center" width="50"/>
        <el-table-column label="物料名称" align="center" prop="materialName"/>
        <el-table-column label="产品码" align="center" prop="materialCode"/>
        <el-table-column label="物料代码" align="center" prop="materialModeCode"/>
        <el-table-column label="所在仓库" align="center" prop="warehouseId" :formatter="warehouseFormat"/>
        <el-table-column label="物料箱编码" align="center" prop="boxCode" min-width="100"/>
        <el-table-column label="托盘编码" align="center" prop="trayCode"/>
        <el-table-column label="入库时间" align="center" prop="warehousingTime" width="180">
          <template v-slot="scope">
            <span>{{ parseTime(scope.row.warehousingTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="pickStatus">
          <template v-slot="scope">
            <dict-tag :type="DICT_TYPE.PICK_STATUS" :value="scope.row.pickStatus"/>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import {getWarehouseSimpleList} from "@/api/hs/warehouse";
import {getPickTaskMaterialDetailList} from "@/api/hs/picktaskmaterialdetail";

export default {
  name: "StartPickMaterialDetailList",
  data() {
    return {
      // 弹出层标题
      dialogTitle: "",
      // 是否显示弹出层
      dialogVisible: false,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 物料信息列表
      list: [],
      warehouseList: [],

      startPick: {},
    };
  },
  methods: {
    /** 打开弹窗 */
    async open(startPick) {
      this.startPick = startPick;
      this.dialogVisible = true;
      this.dialogTitle = "待拣物料详情";
      await this.getList(startPick);
      await this.getWarehouseList();
    },
    /** 查询列表 */
    async getList(startPick) {
      try {
        this.loading = true;
        let params = {
          pickTaskId: startPick.pickTaskId,
          materialModeCode: startPick.materialModeCode
        }
        const res = await getPickTaskMaterialDetailList(params);
        this.list = res.data;
      } finally {
        this.loading = false;
      }
    },
    /** 查询仓库列表 */
    async getWarehouseList() {
      getWarehouseSimpleList().then(res => {
        this.warehouseList = res.data;
      })
    },
    // 仓库名称展示
    warehouseFormat(row, column) {
      if (!row.warehouseId) {
        return '未设置';
      }
      for (const warehouse of this.warehouseList) {
        if (row.warehouseId === warehouse.id) {
          return warehouse.name;
        }
      }
      return '未知【' + row.warehouseId + '】';
    },
  }
}
</script>
<style scoped lang="scss">

</style>
